<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<body>
        <div id="app">
            <router-link to="/login">登录</router-link>
            <router-link to="/reg">注册</router-link>
            <router-view></router-view>
        </div>
        <script>
            var login = {
                template:'<h1>这是登录组件</h1>'
            };
            var reg = {
                template:"<h1>这是reg组件</h1>"
            };
            const router = new VueRouter({
                routes:[
                    {
                    path:'/login',
                    component:login
                    },
                    {
                        path:'/reg',
                        component:reg
                    },


                ]
            })

            var vm =new Vue({
                el:'#app',
                router,
                watch:{
                    // 注意，这个地方不能写this.$route.path
                    '$route.path':function(newV,oldV){
                        console.log(newV + '-----'+ oldV);
                    }
                }
            })
        </script>
</body>
</html>